<style scoped>

</style>

<template>

<div>
  
  <Modal
    v-model="IsModalShow"
    :title="modalFormTitle"
    :mask-closable="false"
    @on-cancel="cancel"
    width="600">
    <Form ref="modalForm" :model="modalForm" :label-width="80"  value=true  style="padding: 3px 60px">
      <Form-item label="用户名" prop="username" :rules="{required: true, message: '必填,1-10位字符',min:1,max:10, trigger:'blur',type:'string'}" >
        <Input v-model="modalForm.username" ></Input>
      </Form-item>
      <Form-item v-if="modalFormTitle==='添加用户'" label="密码" prop="password"  :rules="{required: true, message: '必填,6-16位数字或字母或-_', trigger:'blur',type:'string',pattern: /^[a-zA-Z0-9_-]{6,16}$/}" >
        <Input v-model="modalForm.password" type="password"></Input>
      </Form-item>
      <Form-item label="电话" prop="mobile" :rules="{required: true, message: '输入11位手机号', trigger:'blur',type:'string',pattern: /^1\d{10}$/}">
        <Input v-model="modalForm.mobile" ></Input>
      </Form-item>
      <Form-item label="角色"    >
        <Select v-model="modalForm.roleIdList" placeholder="请选择"  filterable multiple>
           <Option v-for="item in roleSelectData" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </Form-item>
      <Form-item label="部门" prop="depCascader" :rules="{required: true, message: '必选', trigger:'change', type:'array'}">
      <Cascader :data="deptCasc" v-model="modalForm.depCascader" :filterable="true" change-on-select transfer placeholder="选择部门"></Cascader>
      </Form-item>
        <Form-item label="邮箱" prop="email" :rules="{required: false}">
          <Input v-model="modalForm.email" ></Input>
        </Form-item>
        <Form-item label="状态" prop="switchVal">
          <i-switch size="large"  v-model="switchVal" >
            <span slot="open">启用</span>
            <span slot="close">禁用</span>
          </i-switch>
        </Form-item>
    </Form>
    <div slot="footer">
      <Button type="default"  @click="cancel" >关闭</Button>
      <Button type="primary"  :loading="modalForm_loading" @click="saveForm('modalForm')">保存</Button>
    </div>
  </Modal>
</div>

</template>

<script>
import {getUserInfo,updateUser,getRoleSelect,getDeptCascader,saveUser} from '@/api/system'
export default {
    props:{
      parentForm: {
        type: Object,
        default: function () {
          return {

          }
        }
      },
      modalShow:{
        type: Boolean,
        default: true,
      },
      modalFormTitle:{
        type: String,
        default: '添加用户',
      }
    },
    data() {
        return {
          IsModalShow:false,
          modalForm:{
          },
          modalForm_loading:false,
          deptCasc:[],
          roleSelectData:[],
          switchVal:true
        }
    },
    watch:{
      modalShow(curVal,oldVal){
        if(curVal){
           this.getUserDetail();
        }
        this.IsModalShow = curVal;       
      }
    },
    created(){
      this.getRoleSelectList();
      this.getDeptCascList();

    },
    mounted(){
    },
    methods: {
      async getRoleSelectList(){
        let res = await getRoleSelect();
        this.roleSelectData=res.data;
      },
      async getUserDetail(){
         if(this.modalFormTitle=='添加用户'){
           this.modalForm={};
           return;
         }
         let res = await getUserInfo(this.parentForm.userId);
        let ds =res.data;
        if(ds.depCascader){
         ds.depCascader =ds.depCascader+","+ds.deptId;
          ds.depCascader = ds.depCascader.split(",").map(val => parseInt(val));
        }else{
           ds.depCascader = [];
        }
        if(!ds.roleIdList){
           ds.roleIdList = [];
        }
        if(ds.status==1)
          this.switchVal=true;
        else
           this.switchVal=false;
        this.modalForm = ds;
      },
      async getDeptCascList(){
        let res = await getDeptCascader({id:0});
        this.deptCasc=res.data;
      },
      cancel() {
          this.$emit('listenModalForm');
      },
      saveForm(name) {
        this.$refs[name].validate( async (valid) => {
          if (valid) {
           // this.modalForm_loading=true;
           if( this.switchVal==true){
             this.modalForm.status=1;
           }else{
             this.modalForm.status=0;
           }
           let params = JSON.parse(JSON.stringify(this.modalForm));
            let arr = this.modalForm.depCascader;
            params.depCascader=arr.join(",");
            params.deptId = arr[arr.length-1];
           
            try{
              let result;
              if(params.userId){
                result = await updateUser(params);
              }else{
                result = await saveUser(params);
              }
              
              if (result.code=="0") {
                this.$Message.success('提交成功!');
                this.$emit('listenModalForm');
                this.$emit('refreshTableList');
              }else{
                this.$Message.error(result.msg);
              }
            }catch(e){
              this.$Message.error('服务器异常，稍后再试');
            }
            this.modalForm_loading=false;
          } else {
            this.$Message.error('表单验证失败!');
          }
        })
      },
    }
}

</script>
